<template>
  <!-- 窗口内容 -->
  <a-modal
    :open="props.modelVisible"
    title="编辑分配"
    ok-text="确认"
    cancel-text="取消"
    @ok="onOk"
    @cancel="
      formRef.resetFields();
      emit('update:modelVisible', false);
    "
    :maskClosable="true"
  >
    <!-- 表单内容 -->
    <a-form
      ref="formRef"
      :model="formState"
      name="form_in_modal"
      :rules="rules"
      :label-col="{ style: { width: '90px' } }"
      AutoComplete="off"
    >
      <a-form-item name="endTime" label="截至时间">
        <a-date-picker v-model:value="formState.endTime" style="width: 100%" show-time />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { UnwrapRef } from 'vue';
import TaskDao from '@/daos/task_dao';
import ProjectDao from '@/daos/project_dao';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
const store = useStore();

const projectDao = new ProjectDao();
const taskDao = new TaskDao();

//接口定义
interface FormState {
  assignmentIdList: number[]; //分配记录id列表
  endTime: dayjs.Dayjs; //截止时间
}

//modelVisible用于开关窗口，默认关闭
const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  },
  //任务ID，用于选择任务
  assignmentIdList: {
    type: Array<number>,
    default: null
  }
});
//emit用于修改窗口状态
const emit = defineEmits(['update:modelVisible', 'confirm']);
//全部用户列表
const items = ref();
//项目ID
const projectId = store.getters.projectId;
//项目类型
const projectType = store.getters.projectType;
//定义表单
const formRef = ref();
//初始表单内容全为undefined
const formState: UnwrapRef<FormState> = reactive({
  assignmentIdList: props.assignmentIdList,
  endTime: undefined
});
//查询项目成员
const findMumber = () => {
  projectDao
    .findProjectMemberByProjectId(projectId, null, projectType)
    .then((result) => {
      items.value = result.data.data;
    })
    .catch((error) => {
      console.error('查询项目成员失败 findProjectMemberByProjectId', error);
    });
};

const onOk = () => {
  formRef.value
    .validate()
    .then(() => {
      //请求后端
      taskDao
        .updateAssignmentsEndTimeByAssignmentIds(formState.assignmentIdList, formState.endTime)
        .then((result) => {
          message.success(result.data.data);
          //更新任务页面内容
          emit('confirm');
          //更新窗口状态，false为关闭
          emit('update:modelVisible', false);
          //清空表单内容
          formRef.value.resetFields();
        })
        .catch((error) => {
          console.error('更新任务分配截止日期失败 updateAssignmentsEndTimeByAssignmentIds', error);
        });
    })
    .catch((error) => {
      //打印错误结果
      console.log('数据验证失败:', error);
    });
};
//表单验证规则
const rules: Record<string, Rule[]> = {
  //验证任务名称是否填写，blur为输入栏失去对焦后判断
  userList: [{ required: true, message: '请选择承担人', trigger: 'blur' }],
  //验证任务类型是否选择，blur为输入栏失去对焦后判断
  endTime: [{ required: true, message: '截止时间不能为空', trigger: 'blur' }]
};

watch(
  () => props.modelVisible,
  (newValue) => {
    if (newValue === true) {
      findMumber();
      formState.assignmentIdList = props.assignmentIdList;
    }
  }
);
</script>
<style scoped></style>
